<!--  -->
<template>
    <div class="bottom-bar flex">
        <div class="menu f-12 f-medium flex aligin-center justify-center">
            <router-link tag="div" class="menu-item flex flex-column aligin-center justify-center" to="/index/home" replace>
                <span class="home"></span>
                <span class="mt-4">首页</span>
            </router-link>
            <div class="line"></div>
            <div class="menu-item flex flex-column aligin-center justify-center" @click="$emit('toService')">
                <span class="service"></span>
                <span class="mt-4">联系商家</span>
            </div>
         
        </div>
        <div class="btn flex justify-center aligin-center f-14 f-medium" @click="$emit('orderConfirm')">立即购买</div>
    </div>
</template>

<script>
export default {
  components: {},
  props: {
    isCollection: {
      type: Boolean,
      default: () => {
        return false;
      },
      required: true
    }
  },
  data() {
    return {};
  },
  computed: {},
  watch: {},
  methods: {},
  created() {},
  mounted() {},
  updated() {}, //生命周期 - 更新之后
  destroyed() {} //生命周期 - 销毁完成
};
</script>
<style lang='less' scoped>
@import url("../assets/style/mixin"); //引入公共css类
.bottom-bar {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 49px;
  background: #fff;
  z-index: 200;
  .line{
    width: 0;
    height: 30px;
    border-left: 1px dashed #ccc;
  }
  .menu {
    flex: 1;
  }
  .menu-item{
      width: 50%;
      height: 100%;
  }
  .btn {
    width: 200px;
    letter-spacing: 1px;
    color: #fff;
    background: linear-gradient(
      66deg,
      rgba(232, 48, 56, 1),
      rgba(247, 88, 151, 1)
    );
  }
  .home {
    height: 24px;
    width: 24px;
    background: url("../assets/imgs/tabBottom/home.png");
    background-size: 100% 100%;
  }
  .msg {
    height: 24px;
    width: 24px;
    .bg-image("../../assets/imgs/msg");
    background-size: 100% 100%;
  }
  .service {
    height: 24px;
    width: 24px;
    background: url("../assets/imgs/tabBottom/service.png");
    background-size: 100% 100%;
  }
  .collection {
    height: 24px;
    width: 24px;
    .bg-image("../../assets/imgs/collection");
    background-size: 100% 100%;
  }
  .collection-selected {
    height: 24px;
    width: 24px;
    background: url("../assets/imgs/collection-selected.png");
    background-size: 100% 100%;
  }
}
</style>